<template>
  <div class="page">
    <div class="page-search">
      <van-row type="flex" justify="space-between" class="mid">
        <van-col span="18" class="mid">
          <van-search
              class="w100"
              clearable
              v-model="searchData.card_no"
              shape="round"
              maxlength="18"
              background="#f2f2f2"
              placeholder="请输入学生身份证号"
          />
        </van-col>
        <van-col span="6" offset="" class="mid">
          <div class="page-search-option" @click="moduleAction('search')">
            <div class="w100">搜索</div>
          </div>
        </van-col>
      </van-row>
    </div>

    <div class="page-container">
      <div class="card" v-if="formData.id">
        <van-row
            type="flex"
            justify="space-between"
            class="card-item mid mt20"
        >
          <van-col span="4" class="card-item-label mid"> 姓名 </van-col>
          <van-col span="20" class="card-item-value mid"> {{ formData.name }} </van-col>
        </van-row>
        <van-row
            type="flex"
            justify="space-between"
            class="card-item mid mt20"
        >
          <van-col span="4" class="card-item-label mid"> 性别 </van-col>
          <van-col span="20" class="card-item-value mid"> {{ formData.sex_name }} </van-col>
        </van-row>
      </div>
      <div class="card" v-else>
        <van-empty description=""/>
      </div>
    </div>

    <div class="bottom-bar">
      <van-button
          class="bottom-bar-btn"
          block
          size="large"
          color="#D58913"
          type="info"
          text="绑定"
          @click="moduleAction('bind')"
      />
    </div>
  </div>
</template>

<script>
import {getStudentInfo, saveParentsStudent} from "@/api/school";

export default {
  data() {
    return {
      route: {},
      searchData: {
        card_no: ''
      },
      formData: {}
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.route = this.$route.query
    this.init()
  },
  methods: {
    init() {
    },
    async moduleAction(type) {
      switch (type) {
        case 'search':
          const info = await getStudentInfo({...this.searchData})
          if (info.data.errcode == 0) this.formData = info.data.data
          break
        case 'bind':
          if (!this.formData.id) {
            this.$toast('请先进行搜索')
            return false
          }
          this.$dialog.confirm({
            title: '是否确认绑定',
            message: '',
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            confirmButtonColor: '#D58913',
            beforeClose: async (action, done) => {
              if (action === 'confirm') {
                const param = {parent_id: this.route.parent_id, student_id: this.formData.id}
                // console.log('最终提交信息', param)
                const insertData = await saveParentsStudent(param)
                if (insertData.data.errcode == 0) {
                  this.$toast('操作成功')
                  setTimeout(() => {
                    this.$router.go(-1)
                  }, 500)
                  done()
                } else {
                  this.$toast(insertData.data.errmsg)
                  done()
                }
              } else {
                done();
              }
            }
          }).catch(() => {
          })
          break
      }
    },
  }
}
</script>

<style lang='less' scoped>
.page {
  //padding: 10px;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  color: black;
  position: relative;

  /deep/ .van-search__content--round {
    border-radius: 10px;
  }

  /deep/ .van-search__content {
    background-color: #fff;
  }

  &-search {
    width: 100%;

    &-option {
      border-radius: 10px;
      background-color: #fff;
      box-sizing: border-box;
      width: 100%;
      height: auto;
      padding: 5px;
      margin-right: 10px;
      text-align: center;
      font-size: 16px;
      color: #898989;
    }

  }

  &-container {

    .card {
      margin: 15px 10px;
      padding: 20px;
      min-height: 100px;
      border-radius: 20px;
      background: #fff;

      &-item {
        width: 100%;
        color: #616162;

        &-label {
          display: inline-block;
          width: 30%;
          text-align: left;
          text-align-last: justify;
        }

        &-value {
          display: inline-block;
          width: 70%;
          text-align: end;
        }
      }
    }
  }

  .bottom-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}
</style>
